<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
<link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>
<style type="text/css">
.juser-banner{
	height: auto;
	position: relative;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#5097FF), to(#68D5FE));
}
.juser-inner{
	padding: 1.5rem 0 2rem 0;
}
.juser-icon{
	width:5rem;
	height: 5rem;
	border-radius: 7rem;
	margin: auto;
	margin-top: 1.5rem;
	overflow: hidden;
}
.juser-txt{
	text-align:center;
	color: #fff;
	padding-top:1rem;
}
.gerenbg{
	position:fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	font-size: 0;
}
.juser-zhucetime{
	text-align: center;
	font-size:12px;
	color: #eee;
	padding-top: 10px;
}

.splitline{
	height: 10px;
}
#jcontent{
	padding-bottom: 15px;
}
</style>
</head>
<body>
<div id="jcontent" class="jcontent">
	
	<div class="juser-banner">
		<div id="userinfos" class="juser-inner">
			<div class="juser-icon">
				<img id="headImg" src="../img/zw.png" class="img"/>
			</div>
			<div id="userName" class="juser-txt">-</div>
			<div id="regDate" class="juser-zhucetime">-</div>
		</div>
	</div>
	<div class="splitline"></div>
	
	<ul class="ulform">
		<li class="ulform-li line-b vcenter line-t">
			<i class="iconfont icon-yhm licon"></i>
			<span class="ulform-label">昵称</span>
			<input id="nickName" type="text" class="ulform-rli ulform-rli-input" placeholder="请输入昵称" value=""/>
			<input readonly="readonly" id="accountName" type="hidden" class="ulform-rli ulform-rli-input" placeholder="请输入昵称" value=""/>
		</li>
		<li class="ulform-li line-b vcenter">
			<i class="iconfont icon-i1 licon"></i>
			<span class="ulform-label">姓名</span>
			<input id="reallyName" type="text" class="ulform-rli ulform-rli-input" placeholder="请输入真实姓名" value=""/>
		</li>
		<li class="ulform-li line-b vcenter">
			<i class="iconfont icon-xb licon"></i>
			<span class="ulform-label">性别</span>
			<select id="gender" class="ulform-rli">
				<option value="-1">请选择</option>
				<option id="gender_1" value="1">男</option>
				<option id="gender_0" value="0">女</option>
			</select>
		</li>
		<li class="ulform-li line-b vcenter">
			<i class="iconfont icon-csrq licon"></i>
			<span class="ulform-label">出生日期</span>
			<input id="birthdayForamt" readonly="readonly" type="text" class="ulform-rli cqline-b ulform-rli-input" placeholder="请选择出生日期" value=""/>
		</li>
		<li class="ulform-li line-b vcenter">
			<i class="iconfont icon-sj licon"></i>
			<span class="ulform-label">手机号码</span>
			<input id="tel" type="text" class="ulform-rli ulform-rli-input" placeholder="请输入您的手机号码" value=""/>
		</li>
	</ul>
	<div style="color: orangered;width: 100%;height:3rem; line-height: 1.2rem;padding: 0.5rem 1rem 0 1rem;text-align: center;font-size: 14px;;">姓名、手机号等必须是真实资料，否则将会影响商家审核及后续功能使用！</div>
	<a id="addmycars-btn" class="blockbtn">保存个人信息</a>
</div>
<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.plusReady(function(){
	//为保存按钮添加tap事件
	mui('#jcontent').on('tap','#addmycars-btn', function(event) {
		//隐藏输入法
		webapp.hideTypewriting(["nickName","reallyName","birthdayForamt","tel","gender"]);
		save();
	});
	//日期选择
	mui('#jcontent').on('tap','#birthdayForamt', function() {
		pickDate();
	});
	
	//头像上传
	mui('#jcontent').on('tap','#headImg', function() {
		uploadImg();
	});
	window.setTimeout(function(){
		getUserInfo();
	},360);
});

window.addEventListener("userInfoInit", function(e) {
	var _img=document.getElementById("headImg");
	_img.src=webapp.config.restUrl+e.detail.path;
	//更新主页的头像
	var gerenwebview = plus.webview.getWebviewById("geren.html");
	mui.fire(gerenwebview, 'updateHeadImg', {path:e.detail.path});
	window.setTimeout(function(){
		plus.webview.getTopWebview().hide("auto");
	},360);
});

function uploadImg() {
	var btnArray = [{
				title:"拍照"},{title:"从相册选择"}];
	plus.nativeUI.actionSheet( {
		title:"选择",
		cancel:"取消",
		buttons:btnArray
	},function(e){
		if(e.index==1){
			//拍照
			camara();
		}else{
			//从相册选择
			galleryImgs();
		}
	});
}


//相册选取
function galleryImgs(){
    plus.gallery.pick( function(img){
        compressImg(img);
    }, function ( e ) {
        //outSet( "取消选择图片" );
    },{
    	filter:"image",
    	multiple:false
    });
}

//压缩图片
function compressImg(oldPath){
	var newImg=webapp.util.fileRename(oldPath,"_new");
	plus.zip.compressImage({
        src:oldPath,
        dst:newImg,
        quality:100,
        overwrite: true,
        width: '280px'
	},
	function(result) {
		webapp.openByTpl2({
			title:"头像设置",
			hrefs:"/tpl/changephoto.html?img="+newImg,
			ricon:"保存"
		});
 	},function(e) {
		mui.toast("图片压缩失败");
	});
}


function camara(){ 
	var cmr = plus.camera.getCamera();
    cmr.captureImage( function (p) {
        plus.io.resolveLocalFileSystemURL( p, function ( entry ) {
            var img = entry.toLocalURL();
             compressImg(img);
        });
    });
}

function save(){
	document.activeElement.blur();
	var data={
		accountName:document.getElementById("accountName").value,
		nickName:document.getElementById("nickName").value,
        reallyName:document.getElementById("reallyName").value,
        birthdayForamt:document.getElementById("birthdayForamt").value,
        gender:document.getElementById("gender").value,
        tel:document.getElementById("tel").value,
        regTime:document.getElementById("regDate").innerHTML.replace("注册","")
	};
	
	if(!checkData(data)){
		return false;
	}
	webapp.showWaiting();
	//字段校验成功 发起请求 保存数据
    webapp.ajax({
        url:"/carLife/admin/interface/carOwner/update/save",
        data:data,
        success:function(json){
        	webapp.debug(json);
        	webapp.closeWaiting();
            if(json.code == '200'){
                mui.toast("信息修改成功！");
                //更新缓存
                //获取原来的user对象，如果有头像，则需要保存下来
                var user=webapp.getUser();
                data["headPortrait"]=user["headPortrait"];
                user=null;
                window.localStorage.setItem(webapp.config.CACHE_USER,JSON.stringify(data));
            }
            //如果点了更新按钮 个人信息发生变化 需要重新加载页面数据
			var gerenwebview=plus.webview.getWebviewById("geren.html");
			mui.fire(gerenwebview,'userInfoInit',{});
        }
    });
}

/**
 * 检查用户数据
 */

function checkData(data){
	if(webapp.util.isNull(data.nickName)){
		mui.toast("昵称不能为空！");
		return false;
	}else if(webapp.util.isNull(data.reallyName)){
		mui.toast("真实姓名不能为空！");
		return false;
	}else if(webapp.util.isNull(data.birthdayForamt)){
		mui.toast("出生日期不能为空！");
		return false;
	}else if(data.genderForamt=="-1"){
		mui.toast("性别不能为空！");
		return false;
	}else if(webapp.util.isNull(data.tel)){
		mui.toast("手机号码不能为空！");
		return false;
	}
	data.birthdayForamt=data.birthdayForamt.replace("年","-");
	data.birthdayForamt=data.birthdayForamt.replace("月","-");
	data.birthdayForamt=data.birthdayForamt.replace("日","");
	return true;
}

/**
 * 获取用户信息
 */
function getUserInfo(){
    webapp.ajax({
        url:"/carLife/admin/interface/carOwner/selectCarOwnerMessage",
        success:function(json){
            webapp.debug(json);
            var user=json.data;
            document.getElementById("nickName").value=user.nickName?user.nickName:"";
            document.getElementById("reallyName").value=user.reallyName?user.reallyName:"";
            document.getElementById("birthdayForamt").value=user.birthday?webapp.util.dateFormat(user.birthday,'yyyy年MM月dd日'):"";
            document.getElementById("tel").value=user.tel?user.tel:"";
            document.getElementById("regDate").innerHTML=webapp.util.dateFormat(user.createTime,"yyyy年MM月dd日注册");
            document.getElementById("accountName").value=user.accountName;
            if(webapp.util.isNotNull(user.nickName)){
            	document.getElementById("userName").innerHTML=user.nickName;
            }else{
            	document.getElementById("userName").innerHTML=user.accountName; 
            }
            
            if(webapp.util.isNotNull(user.headPortrait)){
           		var _img=document.getElementById("headImg");
           		_img.src=webapp.config.restUrl+user.headPortrait;
            }
            if(user.gender){
            	document.getElementById("gender_"+user.gender).setAttribute("selected","selected");
            }
        }
    });
}
//加载日期控件
function pickDate(){
	plus.nativeUI.pickDate( function(e){
		var d=e.date;
		var cqTime=d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日";
		document.getElementById("birthdayForamt").value=cqTime;;
	},function(e){
	});			
}


function downloadUserHeadImg(loadUrl) {
	//创建下载任务
	var dtask = plus.downloader.createDownload(webapp.config.restUrl+loadUrl, {}, function(d, status) {
		if(status == 200) {
			webapp.debug(d.filename);
			//setImgFromLocal(imgId, d.filename);
			//更新缓存
			window.localStorage.setItem(webapp.config.user_header_img, d.filename);
			document.getElementById("headImg").setAttribute("src",d.filename);
		} else {
			//下载失败,需删除本地临时文件,否则下次进来时会检查到图片已存在
			console.log("下载失败=" + status + "==" + relativePath);
			//dtask.abort();//文档描述:取消下载,删除临时文件;(但经测试临时文件没有删除,故使用delFile()方法删除);
			if(relativePath != null)
				delFile(relativePath);
		}
	});
	//启动下载任务
	dtask.start();
}

</script>

<script id="vehicle-tpl" type="text/html">
</script>
</body>
</html>